<script lang="ts">
import { useAuthed } from '~/composables/useAuthed';
import cs from '~/composables/useCS';
import { useLoginJudgment } from '~/composables/useLoginJudgment';
import { useLocale } from '~/modules/locale';
import { toPlayPage } from '~/pages/play/helpers';
import Expand from '../Expand.vue';
import { useLayout } from '../useLayout';
import { allGamesPopup } from './AllGames.vue';
import GameIcon from './GameIcon.vue';

type TGameTypeList = Api.GetData<typeof apis.apiGameAll>['game_list'];
type TGameInfo = NonNullable<TGameTypeList[number]['game']>;

function useCloseAsideMenu() {
  const { asideMenu } = useLayout();

  return () => asideMenu.state.mask && asideMenu.toggle(false);
}

function omitDsiplayGames(alias: string, games: TGameInfo, omittance: Record<string, number>) {
  if (alias in omittance) {
    const gamesSliced = games.slice(0, omittance[alias]);
    gamesSliced.push({ name: 'all-btn' } as any);
    return gamesSliced;
  }

  return games;
}
</script>

<script setup lang="ts">
const router = useRouter();
const authed = useAuthed();
const closeAsideMenu = useCloseAsideMenu();
const { gameTypes } = queries.useGameAllQuery();
const { localeOption } = useLocale();
const gameTypesMenu = computed(() => gameTypes.value?.filter(x => x.show_position === 1 || x.show_position === 3));
const { openModal } = useLoginJudgment();
const appStore = useAppStore();

function toGameList(detail: TGameTypeList[0] | { alias: string }) {
  router.push(buildGameListRoute(detail)).then(closeAsideMenu);
}

function showCS() {
  cs.show().then(closeAsideMenu);
}
</script>

<template>
  <div class="m-3.5 box-content w-56 select-none overflow-y-auto text-4">
    <!-- 转盘入口 -->
    <div class="wheel-bg relative mb-3 w-full cursor-pointer p-3" @click="openModal(() => globalPopups.lottery.open())">
      <!-- <img src="../../../assets/imgs/lottery-ad.png" class="w-full object-cover"> -->
      <div class="w-26">
        <p class="text-sm font-bold">
          {{ $t('jLnMsVHtKsAmzFi31Njj') }}
        </p>
        <p class="text-3 font-bold">
          {{ $t('3djIqWdEv74tVonnfacL') }}
        </p>
      </div>
      <img src="../../../assets/imgs/lottery-wheel.png" class="absolute right-0 top-[50%] w-19 translate-y--50%">
    </div>

    <!-- 首页入口 -->
    <div class="item" @click="router.push({ name: RN.INDEX }).then(closeAsideMenu)">
      <i class="icon i-local:home" />
      <span class="name text-sys-text-head">
        {{ $t('b2S1l765Kk8sasw6fSmiz') }}
      </span>
    </div>

    <!-- 游戏类型 -->
    <template v-for="(typeItem, ti) in gameTypesMenu" :key="typeItem.type_id">
      <!-- 可展开的游戏类型 -->
      <Expand v-if="typeItem.is_expand && typeItem.game?.length" class="my-2">
        <template #trigger="{ toggle, expanded }">
          <div class="item" @click="toggle">
            <img :src="$store.app.getCdnResPath('gameTypeIcon', typeItem.alias)" class="icon">
            <span class="name text-sys-text-head">{{ typeItem.name }}</span>
            <i class="i-ion:ios-arrow-down flex-none text-sys-text-head transition-all" :class="[expanded ? '' : '-rotate-90']" />
          </div>
        </template>
        <menu class="mt-2 list-none p-0">
          <template v-for="game in omitDsiplayGames(typeItem.alias, typeItem.game, { sports: 10 })" :key="game.name">
            <li
              v-if="game.name === 'all-btn'"
              class="item text-sys-text-body"
              @click="allGamesPopup.open({ games: typeItem.game }, { title: typeItem.name })"
            >
              <span class="name">{{ $t('wyOIbdkxEwBls8XEb2Ort') }}</span>
              <i class="i-ion:ios-arrow-down flex-none transition-all -rotate-90" />
            </li>
            <li v-else class="item" @click="toPlayPage(game)?.then(closeAsideMenu)">
              <GameIcon class="icon" :icon="game.image_icon" />
              <span class="name text-sys-text-body">{{ game.name }}</span>
            </li>
          </template>
        </menu>

        <div v-if="ti < gameTypesMenu.length - 1" class="divider-h-gradual" />
      </Expand>

      <!-- 不可展开的游戏类型 -->
      <div v-else class="my-2">
        <div class="item" @click="toGameList(typeItem)">
          <img :src="$store.app.getCdnResPath('gameTypeIcon', typeItem.alias)" class="icon">
          <span class="name text-sys-text-head">{{ typeItem.name }}</span>
        </div>
      </div>
    </template>

    <div class="divider-h-gradual" />

    <!-- 收藏和最近 -->
    <div class="my-2">
      <template v-if="authed">
        <div class="item" @click="toGameList({ alias: 'like' })">
          <i class="icon i-local:collection text-sys-text-body" />
          <span class="name">{{ $t('gX5Jx50a8Idp1v0WcR0Q') }}</span>
        </div>
        <div class="item" @click="toGameList({ alias: 'recent' })">
          <i class="icon i-local:recently" />
          <span class="name">{{ $t('jb5f92ZdiD5lNxJb94dzz') }}</span>
        </div>
      </template>
      <div class="item" @click="globalPopups.searchPopup.open?.()?.then(closeAsideMenu)">
        <i class="icon i-local:search" />
        <span class="name">{{ $t('yaumayCeCeamLBiC9G8Dn') }}</span>
      </div>
    </div>

    <div class="divider-h-gradual" />

    <!-- 其他导航 -->
    <div class="my-2">
      <div v-if="$store.user.userType !== 7" class="item" @click="router.push({ name: RN.REFERRAL }).then(closeAsideMenu)">
        <i class="icon i-local:referral-2?mask" />
        <span class="name">{{ $t('kvtgHlvWm62cnaLsDMf4P') }}</span>
        <div class="h-6 w-12 flex items-center justify-center rounded-2 bg-sys-layer-e text-3 text-green500 -my-1">
          $1500
        </div>
      </div>
      <!-- <div class="item" @click="router.push({ name: RN.NEWS }).then(closeAsideMenu)"> -->
      <!--  <i class="icon i-local:blog" /> -->
      <!--  <span class="name">{{ $t('kvtgHlvWm62cnaLsFS543') }}</span> -->
      <!-- </div> -->
      <div v-if="appStore.handshake?.is_agent === 0" class="item" @click="router.push({ name: RN.AFFILIATE }).then(closeAsideMenu)">
        <i class="icon i-local:affiliate-2?mask" />
        <span class="name">{{ $t('0UwU0LYzHs92rE3M2nnEz') }}</span>
      </div>

      <div class="item" @click="router.push({ name: RN.RANK }).then(closeAsideMenu)">
        <i class="icon i-local:contest?mask" />
        <span class="name">{{ $t('td0nRGoBbJUiAlLGkm') }}</span>
      </div>
      <div class="item" @click="globalPopups.langPopup.open()?.then(closeAsideMenu)">
        <i class="icon i-ion:earth?mask" />
        <span class="name">{{ localeOption?.label }}</span>
        <!-- <div class="ml-auto text-3.5">
          {{ localeOption?.label }}
        </div> -->
      </div>
    </div>

    <div class="divider-h-gradual" />

    <!-- 客服 -->
    <div
      class="item bg-sys-layer-c text-sys-text-body leading-5.5 block! hover:text-sys-text-head"
      @click="showCS"
    >
      <div class="name">
        <i class="i-local:support?mask mr-1.5 text-4.5" />{{ $t('4mLMgJmQq4YIqObGTbv') }}
      </div>
      <div class="mt-1 text-3.5">
        {{ $t('9yALhjF8fJraayu0mOx1A') }}
      </div>
    </div>

    <!-- App 下载 -->
    <div class="item" @click="router.push({ name: RN.INSTALL_APP }).then(closeAsideMenu)">
      <span class="name">{{ $store.app.appName }} APP</span>
      <div class="flex gap-2 text-4">
        <i class="i-local:ios-icon?mask text-white" />
        <i class="i-local:android?mask text-#7D9735" />
        <i class="i-local:window?mask text-#0C5EA5" />
      </div>
    </div>

    <allGamesPopup.PresetComponent />
  </div>
</template>

<style scoped lang="scss">
.wheel-bg {
  border-radius: 12px;
  background: linear-gradient(90deg, #2c2d36 -1.5%, #4c333f 51.43%, #8c0432 100%);
  //background: url('../../../assets/imgs/lottery/inlet.png') 50% / cover no-repeat;
  box-shadow: -4px 6px var(--ref-rounded-lg, 8px) var(--ref-rounded-none, 0px) rgba(255, 255, 255, 0.25) inset;
}
.item {
  --uno: 'flex gap-2 items-center cursor-pointer p-2.5 rounded-2 text-4 text-sys-text-body';

  &:hover {
    background-color: theme('colors.sys.layer.d');
  }

  & + & {
    margin-top: 4px;
  }

  > .icon {
    flex: none;
    width: 1em;
    height: 1em;
  }

  > .name {
    margin-right: auto;
    font-size: 14px;
  }
}
</style>
